@extends('admin.common.base-master')

@section('html-head')

@endsection

@section('html-body')
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
{{--            @if($type == 'group')--}}
{{--            <a href="{{route('Admin.Home.groupList')}}">活动管理</a>--}}
{{--            @else--}}
            <a href="{{route('Admin.Home.goodsList')}}">商品管理</a>
{{--            @endif--}}
            <em> > </em>
            <a href="#">商品属性列表</a>
        </div>

{{--        @if($type == 'group')--}}
{{--            @include('admin.common.activity-header')--}}
{{--        @endif--}}

        <div class="filter-box clearfix">
            <div class="fl"><span style="height: 30px;line-height: 30px">@if(count($goodsSpu) > 0){{$goodsSpu[0]->goods_name}}@endif</span></div>
            <div class="fr">
{{--                @if($type == 'group')--}}
{{--                    <a class="addBtn" href="{{route("Admin.Home.groupGoodsSpuSet")}}?goods_id={{$goodsId}}&activity_group_id={{$activityGroupId}}">新增</a>--}}
{{--                @else--}}
                <a class="addBtn" style="cursor: pointer" onclick="updateList()">保存</a>
{{--                    <a class="addBtn" href="{{route("Admin.Home.goodsSpuSet")}}?goods_id={{$goodsId}}">新增</a>--}}
                {{--                @endif--}}
            </div>
            <input type="hidden" name="goods_id" id="goods_id" value="{{$goodsId}}"/>
        </div>
        <div class="table-box">
            <table class="table">
                <thead>
                <tr>
{{--                    <th>ID</th>--}}
{{--                    <th>商品名称</th>--}}
                    <th>属性缩略图</th>
{{--                    <th>商品属性名</th>--}}
{{--                    <th>尺码属性名</th>--}}
                    <th>规格属性</th>
                    <th>规格编码</th>
                    <th>商品价格</th>
{{--                    @if($type == 'group')--}}
{{--                    <th>商品拼团价</th>--}}
{{--                    @endif--}}
                    <th>商品库存</th>
                    <th>商品排序</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                @if(count($goodsSpu) > 0)
                    @foreach($goodsSpu as $goods)
                        <tr id="goodsSpu_{{$goods->id}}">
{{--                            <td>{{$goods->id}}</td>--}}
{{--                            <td>{{$goods->goods_name}}</td>--}}
                            <td><a target="_blank" href="{{$goods->thumb_url}}" class="openimg"><img src="{{$goods->thumb_url}}" alt="" width="50"></a></td>
{{--                            <td>{{$goods->spu_name}}</td>--}}
{{--                            <td>{{$goods->size_spu_name}}</td>--}}
                            <td>{{$goods->color_spu_name}}</td>
                            <td>{{$goods->specification_code}}</td>
                            <td>{{$goods->price}}</td>
{{--                            @if($type == 'group')--}}
{{--                            <td>{{$goods->many_price}}</td>--}}
{{--                            @endif--}}
                            <td>{{$goods->stock}}</td>
                            <td>{{$goods->sort}}</td>
                            <td>
                                @if($goods->status == 1)
                                    启用
                                @else
                                    禁用
                                @endif
                            </td>
                            <td>
                                @if($type == 'group')
                                    <a class="color2" href="{{route("Admin.Home.groupGoodsSpuSet")}}?id={{$goods->id}}&goods_id={{$goodsId}}&activity_group_id={{$activityGroupId}}">编辑</a>
                                @else
{{--                                    <a class="color2" href="{{route("Admin.Home.goodsSpuSet")}}?id={{$goods->id}}&goods_id={{$goodsId}}">编辑</a>--}}
                                    <a class="color2" style="cursor: pointer;" onclick="setListItem({{$goods}})">编辑</a>
                                @endif
                                <span>|</span>
                                <a href="javascript:void(0);" class="del" data-id="{{$goods->id}}">删除 </a>
                            </td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
            <div class="add-btn">
                <div class="add" onclick="addList()">+</div>
            </div>
        </div>
        <?php echo $goodsSpu->appends(['goods_id' => $goodsId])->render(); ?>
    </div>
    <script>
        $(function(){
            $(document).on("click",".del",function(){
                var id = $(this).attr("data-id");

                noty({
                    text: '你确定要删除吗?',
                    buttons: [
                        {addClass: 'btn btn-primary', text: '确定', onClick: function($noty) {
                            $noty.close();
                            $.ajax({
                                url:'{{route('Api.Admin.goods.delGoodsSpu')}}',
                                type:'post',
                                dataType:'json',
                                data:{id:id},
                                success:function(obj){
                                    if(obj.level == "success"){
                                        $("#goodsSpu_"+id).hide('slow');
                                    }else{
                                        noty({type:obj.level,text:obj.message,timeout:600});
                                    }
                                },
                                error:function(obj){
                                    console.log(obj);
                                }

                            });
                        }
                        },
                        {addClass: 'btn btn-danger', text: '取消', onClick: function($noty) {
                            $noty.close();
                        }
                        }
                    ]
                });

            });

        });
        var addNumber = 1;
        var addLists = [];
        function addList(){
            var str = "<tr class='addGoods' id='add_"+addNumber+"'>"+"<td><input data-id='' onchange='uploadImage("+addNumber+")' type='file' id='file"+addNumber+"'/><input type='hidden' id='img_id"+addNumber+"'/></td>"+
                "<td><input id='color"+addNumber+"' placeholder='规格属性' /></td>"+"<td><input id='specs"+addNumber+"' placeholder='规格编码' /></td>"+
                "<td><input id='price"+addNumber+"' placeholder='商品价格' /></td>"+"<td><input id='stock"+addNumber+"' placeholder='商品库存' /></td>"+"<td><input id='sort"+addNumber+"' placeholder='排序' /></td>"+
                "<td><select id='status"+addNumber+"'><option value='1'>启用</option><option value='0'>禁用</option></select></td>"+"<td><a class='color2' style='cursor: pointer;' onclick='addOne("+addNumber+")' href='javascript:void(0)'>保存</a><span> | </span><a class='cancel' onclick='cancelOne("+addNumber+")' href='javascript:void(0)'>取消</a></td>"+"</tr>"
            $('tbody').append(str);
            addLists.push(addNumber);
            addNumber++;
            // uploader.init();
        }
        function uploadImage(index){
            var fileItem = $("#file"+index)[0].files[0];
            var formData = new FormData();
            console.log(fileItem)
            formData.append('photo', fileItem)
            formData.append('chunks', '1')
            formData.append('chunk', '0')
            formData.append('file_name', fileItem.name)
            $.ajax ({
                type : "post",
                url : '{{route("Api.File.upload")}}',
                data : formData,
                async : true,
                cache : false,
                contentType : false,
                processData : false,
                dataType : 'json',
                success : function (data) {
                    if (data.level == "success") {
                        noty({
                            text: data.message, type: data.level, timeout: 600,
                            callback: {
                                afterClose:function(){
                                    $('#img_id'+index).val(data.data.id);
                                }
                            }
                        })
                    }else if (data.level == "error") {
                        noty({text: data.message, type: data.level, timeout: 600});
                    }
                }
            });
        }
        function updateList() {
            var data = [];
            var goodsId = $("#goods_id").val();
            for (var i=1; i<addNumber; i++){
                var dataItem = [
                    $('#img_id'+i).val(),
                    $('#color'+i).val(),
                    $('#specs'+i).val(),
                    $('#price'+i).val(),
                    $('#stock'+i).val(),
                    $('#sort'+i).val(),
                    $('#status'+i).val()
                ];
                data.push(dataItem);
            }
            console.log(data);
            $.ajax({
                url: '{{route("Api.Admin.goods.addGoodsSpuArray")}}',
                type: 'post',
                dataType: 'json',
                data: {
                    spu_arr: data,
                    goods_id: goodsId
                },
                success: function (res) {
                    console.log(res);
                    if (res.level == 'success'){
                        noty({
                            text: res.message, type: res.level, timeout: 600,
                            callback: {
                                afterClose: function () {
                                    addLists.forEach(function (item,index) {
                                        console.log(index)
                                        let data = res.data[index];
                                        var html = "<tr id='goodsSpu_"+data.id+"'>"+"<td><a target='_blank' href='"+data.thumb_url+"' class='openimg'><img src='"+data.thumb_url+"' alt='' width='50'></a></td>"+
                                            "<td>"+data.color_spu_name+"</td>"+"<td>"+data.specification_code+"</td>"+"<td>"+data.price+"</td>"+
                                            "<td>"+data.stock+"</td>"+"<td>"+data.sort+"</td>";
                                        if(data.status == 1){
                                            html = html + "<td>启用</td>" + "<td><a class='color2' style='cursor: pointer;' onclick='setListItem("+JSON.stringify(data)+")'>编辑</a><span> | </span><a href='javascript:void(0);' class='del' data-id='"+data.id+"'>删除 </a></td>";
                                        }else{
                                            html = html + "<td>禁用</td>" + "<td><a class='color2' style='cursor: pointer;' onclick='setListItem("+JSON.stringify(data)+")'>编辑</a><span> | </span><a href='javascript:void(0);' class='del' data-id='"+data.id+"'>删除 </a></td>";
                                        }
                                        $("#add_"+item).replaceWith(html)
                                    })
                                    setItem.forEach(function (item) {
                                        setOne(item);
                                    })

                                }
                            }
                        })
                    }else if (res.level == "error") {
                        noty({text: res.message, type: res.level, timeout: 600});
                    }
                },
                error: function (res) {
                    console.log(res);
                }
            })
        }
        function addOne(index) {
            // var size_spu_name          = $('#size'+index).val();
            var color_spu_name         = $('#color'+index).val();
            var specification_code     = $('#specs'+index).val();
            var img_id           = $('#img_id'+index).val();
            var price            = $('#price'+index).val();
            var goodsId          = $('#goods_id').val();
            var stock            = $('#stock'+index).val();
            var sort             = $('#sort'+index).val();
            var status           = $('#status'+index).val();
            $.ajax({
                url: '{{route("Api.Admin.goods.setGoodsSpu")}}',
                type: 'post',
                dataType: 'json',
                data: {
                    // size_spu_name: size_spu_name,
                    color_spu_name: color_spu_name,
                    specification_code: specification_code,
                    img_id: img_id,
                    price: price,
                    goods_id: goodsId,
                    stock:stock,
                    sort:sort,
                    status:status
                },
                success: function (obj) {
                    if (obj.level == "success") {
                        noty({
                            text: obj.message, type: obj.level, timeout: 600,
                            callback: {
                                afterClose:function(){
                                    var html = "<tr id='goodsSpu_"+obj.data.id+"'>"+"<td><a target='_blank' href='"+obj.data.thumb_url+"' class='openimg'><img src='"+obj.data.thumb_url+"' alt='' width='50'></a></td>"+
                                       "<td>"+obj.data.color_spu_name+"</td>"+"<td>"+obj.data.specification_code+"</td>"+"<td>"+obj.data.price+"</td>"+
                                        "<td>"+obj.data.stock+"</td>"+"<td>"+obj.data.sort+"</td>";
                                    if(obj.data.status == 1){
                                        html = html + "<td>启用</td>" + "<td><a class='color2' style='cursor: pointer;' onclick='setListItem("+JSON.stringify(obj.data)+")'>编辑</a><span> | </span><a href='javascript:void(0);' class='del' data-id='"+obj.data.id+"'>删除 </a></td>";
                                    }else{
                                        html = html + "<td>禁用</td>" + "<td><a class='color2' style='cursor: pointer;' onclick='setListItem("+JSON.stringify(obj.data)+")'>编辑</a><span> | </span><a href='javascript:void(0);' class='del' data-id='"+obj.data.id+"'>删除 </a></td>";
                                    }
                                    $("#add_"+index).replaceWith(html)
                                    {{--if(type == 'group'){--}}
                                            {{--    window.location.href = "{{route('Admin.Home.groupGoodsSpuList')}}?goods_id="+goodsId+'&activity_group_id='+activityGroupId;--}}
                                            {{--}else{--}}
                                        {{--window.location.href = "{{route('Admin.Home.goodsSpuList')}}?goods_id="+goodsId;--}}
                                    // }
                                }
                            }
                        });
                    } else if (obj.level == "error") {
                        noty({text: obj.message, type: obj.level, timeout: 600});
                    }

                },
                error: function (obj) {
                    console.log(obj);
                }
            });
        }
        function cancelOne(id) {
            $('#add_'+id).remove();
            addLists.splice(addLists.indexOf(id),1);
        }
        var setItem = [];
        function setListItem(data) {
            // console.log(id)
            // console.log($('#goodsSpu_'+id))
            setItem.push(data.id);
            var str = "<tr class='addGoods' id='set_"+data.id+"'>"+"<td><input onchange='uploadImage("+data.id+")' type='file' id='file"+data.id+"' value='"+data.thumb_url+"'/><input type='hidden' id='img_id"+data.id+"' value='"+data.img_id+"'/></td>"+
                "<td><input id='color"+data.id+"' value='"+data.color_spu_name+"' placeholder='颜色属性' /></td>"+"<td><input id='specs"+data.id+"' placeholder='规格编码' value='"+data.specification_code+"' /></td>"+
                "<td><input id='price"+data.id+"' value='"+data.price+"' placeholder='商品价格' /></td>"+"<td><input id='stock"+data.id+"' value='"+data.stock+"' placeholder='商品库存' /></td>"+"<td><input id='sort"+data.id+"' value='"+data.sort+"' placeholder='排序' /></td>"+
                "<td><select id='status"+data.id+"'>";
            if (data.status == 1){
                str = str + "<option value='1' selected>启用</option><option value='0'>禁用</option></select></td>"+"<td><a class='color2' onclick='setOne("+data.id+")' href='javascript:void(0)'>保存</a><span> | </span><a class='cancel' onclick='cancelSetOne("+JSON.stringify(data)+")' href='javascript:void(0)'>取消</a></td>"+"</tr>"
            } else {
                str = str + "<option value='1' >启用</option><option value='0' selected>禁用</option></select></td>"+"<td><a class='color2' onclick='setOne("+data.id+")' href='javascript:void(0)'>保存</a><span> | </span><a class='cancel' onclick='cancelSetOne("+JSON.stringify(data)+")' href='javascript:void(0)'>取消</a></td>"+"</tr>"
            }
            $("#goodsSpu_"+data.id).replaceWith(str)
        }
        function setOne(id) {
            // var size_spu_name          = $('#size'+id).val();
            var color_spu_name         = $('#color'+id).val();
            var specification_code     = $('#specs'+id).val();
            var img_id           = $('#img_id'+id).val();
            var price            = $('#price'+id).val();
            var goodsId          = $('#goods_id').val();
            var stock            = $('#stock'+id).val();
            var sort             = $('#sort'+id).val();
            var status           = $('#status'+id).val();
            $.ajax({
                url: '{{route("Api.Admin.goods.setGoodsSpu")}}',
                type: 'post',
                dataType: 'json',
                data: {
                    // size_spu_name: size_spu_name,
                    color_spu_name: color_spu_name,
                    specification_code: specification_code,
                    img_id: img_id,
                    price: price,
                    goods_id: goodsId,
                    stock:stock,
                    sort:sort,
                    status:status,
                    id:id
                },
                success: function (obj) {
                    if (obj.level == "success") {
                        noty({
                            text: obj.message, type: obj.level, timeout: 600,
                            callback: {
                                afterClose:function(){
                                    var html = "<tr id='goodsSpu_"+obj.data.id+"'>"+"<td><a target='_blank' href='"+obj.data.thumb_url+"' class='openimg'><img src='"+obj.data.thumb_url+"' alt='' width='50'></a></td>"+
                                        "<td>"+obj.data.color_spu_name+"</td>"+"<td>"+obj.data.specification_code+"</td>"+"<td>"+obj.data.price+"</td>"+
                                        "<td>"+obj.data.stock+"</td>"+"<td>"+obj.data.sort+"</td>";
                                    if(obj.data.status == 1){
                                        html = html + "<td>启用</td>" + "<td><a class='color2' style='cursor: pointer;' onclick='setListItem("+JSON.stringify(obj.data)+")'>编辑</a><span> | </span><a href='javascript:void(0);' class='del' data-id='"+obj.data.id+"'>删除 </a></td>";
                                    }else{
                                        html = html + "<td>禁用</td>" + "<td><a class='color2' style='cursor: pointer;' onclick='setListItem("+JSON.stringify(obj.data)+")'>编辑</a><span> | </span><a href='javascript:void(0);' class='del' data-id='"+obj.data.id+"'>删除 </a></td>";
                                    }
                                    $("#set_"+id).replaceWith(html)
                                    {{--if(type == 'group'){--}}
                                    {{--    window.location.href = "{{route('Admin.Home.groupGoodsSpuList')}}?goods_id="+goodsId+'&activity_group_id='+activityGroupId;--}}
                                    {{--}else{--}}
                                    {{--window.location.href = "{{route('Admin.Home.goodsSpuList')}}?goods_id="+goodsId;--}}
                                    // }
                                    setItem.splice(setItem.indexOf(id),1);
                                    console.log(setItem);
                                }
                            }
                        });
                    } else if (obj.level == "error") {
                        noty({text: obj.message, type: obj.level, timeout: 600});
                    }

                },
                error: function (obj) {
                    console.log(obj);
                }
            });
        }
        function cancelSetOne(data) {
            console.log(data)
            var html = "<tr id='goodsSpu_"+data.id+"'>"+"<td><a target='_blank' href='"+data.thumb_url+"' class='openimg'><img src='"+data.thumb_url+"' alt='' width='50'></a></td>"+
                "<td>"+data.color_spu_name+"</td>"+"<td>"+data.specification_code+"</td>"+"<td>"+data.price+"</td>"+
                "<td>"+data.stock+"</td>"+"<td>"+data.sort+"</td>";
            if(data.status == 1){
                html = html + "<td>启用</td>" + "<td><a class='color2' style='cursor: pointer;' onclick='setListItem("+JSON.stringify(data)+")'>编辑</a><span> | </span><a href='javascript:void(0);' class='del' data-id='"+data.id+"'>删除 </a></td>";
            }else{
                html = html + "<td>禁用</td>" + "<td><a class='color2' style='cursor: pointer;' onclick='setListItem("+JSON.stringify(data)+")'>编辑</a><span> | </span><a href='javascript:void(0);' class='del' data-id='"+data.id+"'>删除 </a></td>";
            }
            $("#set_"+data.id).replaceWith(html)
            setItem.splice(setItem.indexOf(data.id),1);
        }
    </script>
@endsection